<!-- 额度查询 -->
<template>
	<view class="quota-box">
		<view class="quota-box-filter">
			<view class="filter-btn" @tap="filterFun">
				<image class="quota-box-filter-img" src="/static/main/shaixuan.png"></image>
				<text>筛选</text>
			</view>
		</view>
		<view class="quota-box-table">
			<view class="quota-box-thead">
				<view class="quota-box-th w25">企业名称</view>
				<view class="quota-box-th w50">额度金额</view>
				<view class="quota-box-th w25 text-c">银行机构</view>
			</view>
			<view class="quota-box-tr-box" v-for="tr in tableList" :key="tr.id">
				<view class="quota-box-tr">
					<view class="quota-box-td text-l w50">{{tr.name}}</view>
					<view class="quota-box-td w50">
						{{tr.money | unitConverter}}
					</view>
					<view class="quota-box-td w25 text-c" @tap="toDetail(tr)">
						<view>{{tr.bank}} <uni-icons type="right" size="12"></uni-icons></view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="filterDialog" type="dialog">
			<uni-popup-dialog class="customer-dialog no-padding-dialog my-no-title-dialog" type="info"
				:before-close="true" confirmText="确认" cancelText="重置" @confirm="dialogFilterConfirm"
				@close="dialogFilterClose">
				<view class="filter-dialog-box">
					<view class="filter-dialog-title-box">
						<text class="filter-dialog-title">额度筛选</text>
						<uni-icons @tap="closeDialog" class="filter-dialog-close" type="closeempty"
							size="20"></uni-icons>
					</view>
					<view class="filter-form">
						<view class="form-cell">
							<view class="text-l">生效日期</view>
							<view class="cell-box my-date-pick-box">
								<uni-datetime-picker :end="effectEnd" :border="false" type="date"
									@change="changeEffectStart">
									<text v-if="effectStart">{{effectStart}}</text>
									<text class="placeholder-color" v-else>起始时间</text>
								</uni-datetime-picker>
								至
								<uni-datetime-picker :start="effectStart" :border="false" type="date"
									@change="changeEffectEnd">
									<text v-if="effectEnd">{{effectEnd}}</text>
									<text class="placeholder-color" v-else>终止时间</text>
								</uni-datetime-picker>
							</view>
						</view>
						<view class="form-cell">
							<view class="text-l">失效日期</view>
							<view class="cell-box my-date-pick-box">
								<uni-datetime-picker :end="invalidEnd" :border="false" type="date"
									@change="changeInvalidStart">
									<text v-if="invalidStart">{{invalidStart}}</text>
									<text class="placeholder-color" v-else>终止时间</text>
								</uni-datetime-picker>
								至
								<uni-datetime-picker :start="invalidStart" :border="false" type="date"
									@change="changeInvalidEnd">
									<text v-if="invalidEnd">{{invalidEnd}}</text>
									<text class="placeholder-color" v-else>终止时间</text>
								</uni-datetime-picker>
							</view>
						</view>
						<view class="form-cell">
							<view class="text-l">额度金额</view>
							<view class="cell-box">
								<input type="text" v-model="quotaAmtStart" class="text-l" placeholder="起始金额"
									placeholder-class="placeholder-color" />
								至
								<input type="text" v-model="quotaAmtEnd" class="text-r" placeholder="终止金额"
									placeholder-class="placeholder-color" />
							</view>
						</view>
						<view class="cell-box">
							<text class="cell-title">企业名称</text>
							<input class="cell-input" v-model="entName" type="text" placeholder="请输入"
								placeholder-class="placeholder-color" />
						</view>
						<view class="cell-box">
							<text class="cell-title">银行机构</text>
							<input class="cell-input" v-model="bank" type="text" placeholder="请输入"
								placeholder-class="placeholder-color" />
						</view>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList: [{
						id: '001',
						name: '经销商1',
						money: 2000,
						bank: '微众银行'
					},
					{
						id: '002',
						name: '经销商2',
						money: 2000,
						bank: '邮储银行'
					},
					{
						id: '003',
						name: '经销商3',
						money: 2000,
						bank: '华润银行'
					},
					{
						id: '004',
						name: '经销商4',
						money: 2000,
						bank: '微众银行'
					},
					{
						id: '005',
						name: '经销商5',
						money: 2000,
						bank: '邮储银行'
					},
					{
						id: '006',
						name: '经销商6',
						money: 2000,
						bank: '华润银行'
					},
					{
						id: '007',
						name: '经销商7',
						money: 2000,
						bank: '微众银行'
					},
					{
						id: '008',
						name: '北京中煤华远经销公司',
						money: 2000,
						bank: '邮储银行'
					}
				],
				effectStart: '',
				effectEnd: '',
				invalidStart: '',
				invalidEnd: '',
				quotaAmtStart: '',
				quotaAmtEnd: '',
				entName: '',
				bank: ''
			}
		},
		methods: {
			filterFun() {
				this.$refs.filterDialog.open()
			},
			dialogFilterConfirm() {
				this.$refs.filterDialog.close()
			},
			dialogFilterClose() {
				this.effectStart = '';
				this.effectEnd = '';
				this.invalidStart = '';
				this.invalidEnd = '';
				this.quotaAmtStart = '';
				this.quotaAmtEnd = '';
				this.entName = '';
				this.bank = '';
			},
			closeDialog() {
				this.$refs.filterDialog.close()
			},
			changeEffectStart(e) {
				this.effectStart = e
			},
			changeEffectEnd(e) {
				this.effectEnd = e
			},
			changeInvalidStart(e) {
				this.invalidStart = e
			},
			changeInvalidEnd(e) {
				this.invalidEnd = e
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/oms/quotaDetails'
				});
			}
		}
	}
</script>

<style>
	.quota-box {
		width: 100%;
		height: 100%;
		background-color: #F8F9Fc;
	}

	.quota-box-filter {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
	}

	.filter-btn {
		height: 88rpx;
		width: 130rpx;
		display: flex;
		align-items: center;
		margin-left: 50rpx;
	}

	.quota-box-filter-img {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.quota-box-table {
		margin: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 16rpx 110rpx;
		box-sizing: border-box;
	}

	.quota-box-thead {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: solid 1rpx #EFEFEF;
		display: flex;
		flex-direction: row;
		text-align: center;
	}

	.quota-box-tr-box {
		border-bottom: solid 1rpx #EFEFEF;
	}

	.quota-box-tr-box:last-child {
		border: none;
	}

	.quota-box-tr {
		min-height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		text-align: center;
	}


	.quota-box-th {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		font-weight: 400;
	}

	.quota-box-td {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #333333;
		font-weight: 400;
	}

	.w25 {
		width: 25%;
	}

	.w50 {
		width: 50%;
	}

	.filter-dialog-box {
		width: 100%;
		text-align: center;
		position: relative;
	}

	.filter-dialog-close {
		position: absolute;
		right: 30rpx;
		top: 8rpx;
	}

	.filter-dialog-title-box {
		width: 100%;
		height: 105rpx;
		line-height: 105rpx;
		border-bottom: solid 1rpx #EFEFEF;
	}

	.filter-dialog-title {
		font-family: PingFangSC-Semibold;
		font-size: 36rpx;
		color: #333333;
		font-weight: 600;
	}

	.filter-form {
		padding: 0 45rpx 48rpx 26rpx;
	}

	.form-cell {
		margin-top: 30rpx;
	}

	.cell-box {
		height: 97rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: solid 1rpx #EFEFEF;
	}

	.cell-title {
		text-align: left;
		width: 200rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 400;
	}

	.cell-input {
		flex: 1;
		text-align: right;
		font-size: 32rpx;
		color: #333333;
		font-weight: 400;
		margin-left: 16rpx;
	}

	.placeholder-color {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #999999;
		letter-spacing: 0;
		font-weight: 400;
	}
</style>